<template>
  <div>
    <!-- 代办通知 -->
    <orhon-card
      :title="item.title"
      :extra="item.extra"
      :icon="item.icon"
      :iconSetting="item.iconSetting"
      @Change="Change"
      :loading="loading"
    >
      <template v-slot:content>
        <ul class="Ul">
          <li v-for="(val,index) in List" :key="index">
            <div>
              <a-avatar :size="64" icon="user" :src="val.avatar"/>
            </div>
            <div class="container">
              <div class="Top">
                <div class="TopTitle">{{val.title}}</div>
                <div class="TopTime">{{val.time}}</div>
              </div>
              <div class="describe">{{formatterText(val.describe)}}</div>
            </div>
          </li>
        </ul>
        <a-checkbox @change="onChange">仅看会议相关</a-checkbox>
      </template>
    </orhon-card>
    <!-- 我的业务 -->
    <Mybusiness/>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";
import Mybusiness from "./Mybusiness.vue";
import { Notifications } from "~/models/HomePage/index";
import OrhonCard from "../Card.vue";

@Component({
  components: {
    OrhonCard,
    Mybusiness
  }
})
export default class OrhonSilder extends Vue {
  loading: boolean = true;
  //卡片配置数据
  item: Object = {
    title: "待办事项",
    icon: true, //是否是图标
    extra: "", //右侧标题 icon存在为图表，不存在为标题
    iconSetting: {
      type: "check",
      fontSize: 25,
      color: "red",
      tooltipText: "全部标记为已读",
      tooltipPosition: "bottom" //top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom
    }
  };
  //卡片数据列表
  List: Notifications[] = [
    {
      avatar:
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1965320490,1707752522&fm=15&gp=0.jpg",
      title: "测试1",
      time: "2018-01-02",
      describe:
        "描述信息,描述信息描述描述信息述描述信息描述信息描述描述描述描述描述描述"
    },
    {
      avatar:
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1965320490,1707752522&fm=15&gp=0.jpg",
      title: "测试2",
      time: "2018-01-03",
      describe: "描述信息2"
    },
    {
      avatar:
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1965320490,1707752522&fm=15&gp=0.jpg",
      title: "测试3",
      time: "2018-01-3",
      describe: "描述信息3"
    }
  ];
  Change(val: string) {
    this.$message.success(val);
  }
  formatterText(val) {
    if (val) {
      if (val.length >= 28) {
        return val.substring(0, 28) + "...";
      } else {
        return val;
      }
    } else {
      return "暂无数据";
    }
  }
  onChange(val) {
    console.log(val.target.checked);
  }
  created() {
    const _this = this;
    setTimeout(() => {
      _this.loading = false;
    }, 3000);
  }
}
</script>
<style lang="less" scoped>
.Ul {
  margin: 0px;
  padding: 0px;
  li {
    list-style: none;
    height: 85px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    // margin-bottom: 20px;
    margin-bottom: 10px;
    border-bottom:1px solid #eee;
    padding-bottom: 15px;

    .Top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .TopTitle {
        color: #232d50;
        font-size: 18px;
      }
      .TopTime {
        color: #ababab;
        font-size: 16px;
      }
      .describe {
        color: #686868;
        font-size: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

      }
    }
    .container {
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-left: 20px;
      width: calc( 100% - 70px );

    }
  }
}
</style>